<template>
  <van-pull-refresh
    v-model="isLoading"
    :head-height="80"
    @refresh="onRefresh"
    style="min-height: 100vh"
  >
    <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
    <template #pulling="props">
      <img
        class="doge"
        src="https://img.yzcdn.cn/vant/doge.png"
        :style="{ transform: `scale(${props.distance / 80})` }"
      />
    </template>

    <!-- 释放提示 -->
    <template #loosing>
      <img class="doge" src="https://img.yzcdn.cn/vant/doge.png" />
    </template>

    <!-- 加载提示 -->
    <template #loading>
      <img class="doge" src="https://img.yzcdn.cn/vant/doge-fire.jpg" />
    </template>
    <input
      type="text"
      placeholder="搜索、歌曲、专辑"
      id="search"
      v-model="values"
      autocomplete="off"
      @keyup.enter="inputing = true"
      @input="inputing = false"
    />
    <i class="clear" v-show="values"
      ><img src="../assets/clear.svg" @click="values = ''"
    /></i>
    <div class="seaa" v-if="values && !inputing">
      <h3>搜索"{{ values }}"</h3>
      <span
        v-for="(item, indexd) in lists"
        :key="indexd"
        @click="(values = item.keyword), (inputing = true)"
      >
        <img src="../assets/search.svg" /> {{ item.keyword }}
      </span>
    </div>
    <div class="bottom" v-if="!values && !inputing">
      <div class="xiao">热门搜索</div>
      <ul class="hotSearch">
        <li
          v-for="(honSearched, indexed) in searchData"
          :key="indexed"
          @click="values = honSearched.searchWord"
        >
          {{ honSearched.searchWord }}
        </li>
      </ul>
    </div>
    <SearchNewmusic
      v-if="values && inputing"
      @update:music="$emit('update:music', $event)"
      @update:playlist="$emit('update:playlist', $event)"
      :newSongs="newSongs"
      :currentMusic="$attrs.currentMusic"
      :paused="$attrs.paused"
    ></SearchNewmusic>
  </van-pull-refresh>
</template>
<script>
// import Searchbordered from "@/components/Searchbordered.vue";
import SearchNewmusic from "@/components/SearchNewmusic.vue";
import { Toast } from "vant";
export default {
  components: {
    // Searchbordered,
    SearchNewmusic,
  },
  data: function () {
    return {
      honSearch: [],
      values: "",
      lists: [],
      inputing: false,
      newSongs: [],
      count: 0,
      isLoading: false,
    };
  },
  computed: {
    searchData: function () {
      return this.honSearch.slice(0, 10);
    },
  },
  created() {
    this.$root.isShowLoading = true;
    this.axios
      .get("/search/hot/detail")
      .then((response) => {
        // console.log(response.data.data);
        this.honSearch = response.data.data;
      })
      .finally(() => {
        this.$root.isShowLoading = false;
      });
  },
  watch: {
    values: function (pass) {
      var _this = this;
      this.$root.isShowLoading = true;
      setTimeout(() => {
        this.axios
          .get("/search/suggest" + "?keywords=" + pass + "&type=mobile")
          .then(function (response) {
            _this.lists = response.data.result.allMatch;
          })
          .finally(() => {
            this.$root.isShowLoading = false;
          });
      }, 500);
    },
    inputing: function (n) {
      var _this = this;
      this.$root.isShowLoading = true;
      if (n) {
        this.axios
          .get("/search/?keywords=" + this.values)
          .then(function (response) {
            // _this.lists = response.data.result.allMatch;
            _this.newSongs = response.data.result.songs;
            // console.log(response);
          })
          .finally(() => {
            this.$root.isShowLoading = false;
          });
      }
    },
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
  },
};
</script>

<style scoped lang="less">
.doge {
  width: 140px;
  height: 72px;
  margin-top: 8px;
  border-radius: 4px;
}
#search {
  width: 100%;
  height: 30px;
  border-radius: 13px;
  border: none;
  background: #ebecec;
  outline-style: none;
  margin: 15px 0;
}
.clear {
  img {
    width: 25px;
    height: 25px;
    position: relative;
    top: -42px;
    right: -340px;
  }
}
.seaa {
  h3 {
    color: skyblue;
  }
  img {
    width: 13px;
    height: 13px;
    line-height: 13px;
    margin: 0 5px;
  }
  span {
    display: inline-block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #ebecec;
    border-bottom: 1px solid #ebecec;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
.bottom {
  .xiao {
    font-size: 12px;
    height: 12px;
  }
  .hotSearch {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    li {
      border: 1px solid #ebecec;
      border-radius: 13px;
      display: inline-block;
    height: 32px;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 0 14px;
    font-size: 14px;
    line-height: 32px;
    color: #333;
    }
  }
}
</style>